
import React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import VariableReferenceGuide from "./VariableReferenceGuide";
import MarkdownTemplateEditor from './MarkdownTemplateEditor';
import WordTemplateUploader from './WordTemplateUploader'; // Assuming this component exists or will be created

// Placeholder for other editor components
const ContentBlocksPanel = () => (
  <div className="p-4 text-center text-gray-500">
    <p>结构化内容块编辑器区域</p>
    <p className="text-sm">（此处将放置拖放式内容块）</p>
  </div>
);
const PropertiesPanel = () => (
  <div className="p-4 text-center text-gray-500">
    <p>属性编辑器区域</p>
    <p className="text-sm">（此处将编辑选中块的属性）</p>
  </div>
);
const PreviewPanel = () => (
  <div className="p-4 text-center text-gray-500">
    <p>预览区域</p>
    <p className="text-sm">（此处将实时显示模板效果）</p>
  </div>
);

export default function DocumentTemplateEditor({ 
  template, 
  onSave, 
  onCancel, 
  isLoading = false,
  documentTemplates = [] 
}) {
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p>加载模板编辑器中...</p>
        </div>
      </div>
    );
  }

  // 核心修改：根据模板类型选择不同的编辑器
  if (template?.templateType === 'word_template') {
    return <WordTemplateUploader template={template} onSave={onSave} onCancel={onCancel} />;
  } else if (template?.templateType === 'constructionScheme' || 
             template?.templateType === 'emergencyPlan' || 
             template?.templateType === 'work_report' || 
             template?.templateType === 'safety_analysis') { 
    // 使用新的Markdown编辑器处理结构化文档
    return <MarkdownTemplateEditor template={template} onSave={onSave} onCancel={onCancel} />;
  }

  // 降级到原有的区块编辑器（如果还需要的话）
  return (
    <div className="h-full flex flex-col bg-gray-50">
      <div className="grid grid-cols-1 md:grid-cols-12 gap-2 h-[calc(100vh-220px)]">
        {/* Left Panel */}
        <div className="md:col-span-3 bg-white border rounded-lg h-full">
          <Tabs defaultValue="variables" className="flex flex-col h-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="blocks">内容块</TabsTrigger>
              <TabsTrigger value="variables">变量</TabsTrigger>
            </TabsList>
            <TabsContent value="blocks" className="flex-1 overflow-auto">
              <ContentBlocksPanel />
            </TabsContent>
            <TabsContent value="variables" className="flex-1 overflow-hidden">
              <VariableReferenceGuide />
            </TabsContent>
          </Tabs>
        </div>

        {/* Middle Panel */}
        <div className="md:col-span-6 bg-white border rounded-lg h-full overflow-auto">
          <PreviewPanel />
        </div>

        {/* Right Panel */}
        <div className="md:col-span-3 bg-white border rounded-lg h-full overflow-auto">
          <PropertiesPanel />
        </div>
      </div>
    </div>
  );
}
